﻿/******************************************************************************
* File description: CustomComboColorPicker.qml
* Function: 复选框
* Current Version: 1.0.0
 *****************************************************************************/
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Controls.impl 2.14
import QtGraphicalEffects 1.14

Item {
    id: root

    // 样式设置同ComboBox

    property var    model: ["Content1", "Content2", "Content3"]
    property var    checkedState: []
    property string displayText: getText()  // 文本框显示的文字内容，默认用逗号间隔所有选项
    property string editDefaultText: ""

    // 基本样式
    property real   fontsize: config.fontsize

    // 文本框样式
    property real   editWidth: 180*dp
    property real   editHeight: 40*dp
    property string editBgColor: "#FFF"
    property string editBorderColor: "#CCCCCC"
    property color  editBorderHighlightColor: config.themeColor
    property real   editBorderWidth: 1
    property real   editRadius: 3*dp
    property real   editLeftPadding: 10*dp
    property string editFontColor: "#222"
    property var    editFontHorAlign: Text.AlignLeft
    property bool   editHighlightEnabled: true      // 是否选中高亮

    // popup
    property int  maxPopupListCount: 4
    property real popupItemHeight: 40*dp
    property real popupHeight: popupItemHeight * Math.min(maxPopupListCount, model.length)

    property real   popupBorderWidth: 0
    property color  popupBorderColor: "transparent"
    property real   popupRadius: 3*dp
    property real   popupTopMargin: 2*dp
    property real   popupLeftPadding: 10*dp

    property color  popupItemBgColor: "#FFF"
    property color  popupItemFontColor: "#333"
    property color  popupItemHighlightColor: config.themeColor_light2
    property color  popupItemHighlightedFontColor: config.themeColor_deep

    // 标题
    property string title: ""
    property color  titleColor: "#333"
    property int    titleWidth: title==="" ? 0 : (titleDirect===0 ? 80*dp : editWidth)
    property int    titleHeight: title==="" ? 0 : (titleDirect===0 ? 40*dp : 30*dp)
    property int    titleDirect: 0          // 标题文字位置 0左边 1上边
    property bool   required: false
    property bool   enabled: true

    property bool checkAllEnabled: false   // 是否有"全部"选项 (还没做)





    // 下拉框选项变更事件
    signal checkChanged()


    function getCheckedList(){
        var list = []
        for(let i = 0; i < model.length; i ++){
            if(checkedState[i]){
                list.push(model[i])
            }
        }
        return list
    }function getText(){
        var res = ""
        for(let i = 0; i < model.length; i ++){
            if(checkedState[i]){
                if(res !== ""){
                    res += ","
                }res += model[i]
            }
        }
        return res
    }
    function setCheckedState(name, state){
        for(let i = 0; i < model.length; i ++){
            if(model[i] === name){
                checkedState[i] = state
            }
        }
        checkedStateChanged()
    }
    function setCheckedList(checkedList){

        initCheckState()
        for(let i = 0; i < checkedList.length; i ++){
            let index = model.indexOf(checkedList[i])
            if(index !== -1){
                checkedState[index] = true
            }
        }
        checkedStateChanged()
    }

    property var indicatorDelegate: Item {
        width: 35*dp; height: editHeight
        x: editWidth - width
        Image {
            anchors.centerIn: parent
            width: 25*dp
            height: 20*dp
            source: "qrc:/picture/downarrow.png"
        }
    }

    // private ==========================================================================

    width: titleDirect === 0 ? (titleWidth + editWidth) : editWidth
    height: titleDirect===0 ? editHeight : (titleHeight + editHeight)


    onModelChanged: {
        initCheckState()
        if(editDefaultText!==""){
            for(let i = 0; i < model.length; i ++){
                checkedState[i]=editDefaultText.includes(model[i])
            }
        }
    }

    function initCheckState(){      // 全部初始化为false
        checkedState = []
        for(let i = 0; i < model.length; i ++){
            checkedState.push(false)
        }
        root.checkedStateChanged()
    }



    // 标题
    Item{
        id: rectTitle
        height: titleHeight;    width: titleWidth
        Text{
            text: title
            color: titleColor
            font.pixelSize: fontsize
            anchors.verticalCenter: parent.verticalCenter
        }
    }

    ComboBox {
        id: control
        height: editHeight
        width: editWidth
        x: titleDirect===0 ? titleWidth : 0
        y: titleDirect===0 ? 0 : titleHeight

//        // 下拉框中每一个选项的代理样式
//        delegate: ItemDelegate {
//        }

        // 显示框文本样式
        contentItem: Text {
            id: textInput
            text: root.displayText
            font.pixelSize: fontsize
            verticalAlignment: Text.AlignVCenter
            color: editFontColor
            horizontalAlignment: editFontHorAlign
            width: control.width - indicatorDelegate.width
            elide: Text.ElideRight
            leftPadding: editLeftPadding
            clip: true
        }

        // 显示框背景样式
        background: Rectangle {
            anchors.fill: parent
            color: editBgColor
            border.width: editBorderWidth
            border.color: (this.isHovered || control.popup.visible) ? editBorderHighlightColor : editBorderColor
            radius: editRadius
            property bool isHovered: false
            MouseArea{      // Hover样式
                anchors.fill: parent
                propagateComposedEvents: true
                hoverEnabled: config.hoverEnabled
                cursorShape: Qt.IBeamCursor
                onEntered: {
                    parent.isHovered = true && config.hoverEnabled
                }onExited: {
                    parent.isHovered = false
                }onPressed:{
                    mouse.accepted = false
                }onReleased:{
                    mouse.accepted = false
                }
            }
            // 阴影
            layer.enabled: control.popup.visible && editHighlightEnabled && config.device!==2
            layer.effect: DropShadow {
                visible: editHighlightEnabled
                radius: 12*dp
                samples: 43
                transparentBorder: true
                color: editBorderHighlightColor
                opacity: 0.3
            }
        }

        // 向下三角箭头
        indicator: indicatorDelegate

        // 下拉框（Popup）
        popup: Popup {
            id: popup
            width: control.width
            height: popupHeight
            y: control.height + popupTopMargin
            padding: 0
            // popup的内容
            contentItem: Rectangle{
                radius: popupRadius
                height: popupHeight;  width: control.width
                clip: true
                ListView{
                    anchors.fill: parent
                    model: root.model.length
                    delegate: Rectangle{
                        property bool isHovered: false
                        height: popupItemHeight;  width: parent.width
                        color: isHovered ? popupItemHighlightColor : popupItemBgColor
                        Text{
                            text: root.model[index]
                            color: checkedState[index] ? popupItemHighlightedFontColor : popupItemFontColor
                            anchors.verticalCenter: parent.verticalCenter
                            leftPadding: popupLeftPadding
                            font.pixelSize: fontsize
                        }CustomImage{
                            height: 12*dp;  width: 12*dp
                            x: parent.width - width - y; y: (parent.height - height) * 0.5
                            source: "qrc:/picture/tick1_b.png"
                            visible: checkedState[index]
                        }MouseArea{
                            anchors.fill: parent
                            hoverEnabled: config.hoverEnabled
                            onEntered: {
                                parent.isHovered = true && config.hoverEnabled
                            }onExited: {
                                parent.isHovered = false
                            }
                            onReleased: {
                                checkedState[index] = !checkedState[index]
                                root.checkedStateChanged()
                                root.checkChanged()
                            }
                        }
                    }
                }
            }

            // popup的背景
            background: Rectangle {
                clip: true
                radius: popupRadius
                border.color: popupBorderColor
                border.width: popupBorderWidth
                layer.enabled: true  // 设置layer为enable
                // 阴影
                layer.effect: DropShadow {
                    radius: 21*dp
                    samples: 43
                    transparentBorder: true
                    color: "#4D333333"
                }
            }

            // 过渡效果
            enter: Transition {
                NumberAnimation {
                    property: "height"
                    from: 0
                    to: popupHeight
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
            exit: Transition {
                NumberAnimation {
                    property: "height"
                    from: popupHeight
                    to: 0
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
        }

    }

    Rectangle{
        anchors.fill: control
        color: "#EEEEEE"
        opacity: 0.6
        MouseArea{
            anchors.fill: parent
            onReleased: {

            }
        }
        visible: !enabled
    }


}
